import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 预定义空白的 State 数据对象
let state = {
  // 用户登录信息  { refresh_token, token }
  tokenInfo: {},
  // 用户的基本信息
  user: {},
  // 用户的简介信息
  profile: {}
}

// 从本地读取 state 的值
const stateStr = window.localStorage.getItem('state')
if (stateStr) {
  // 如果 state 的值存在，则转化为对象，赋值给 state
  state = JSON.parse(stateStr)
}

const store = new Vuex.Store({
  state,
  mutations: {
    // 跟新用户的登录信息
    updateTokenInfo(state, paylod) { // { refresh_token, token }
      state.tokenInfo = paylod
      // 这里的 this 代表 store 的实例对象
      // store 的实例对象上，有一个 commit 方法，可以触发指定名称的 mutation 方法
      this.commit('saveToStorage')
    },
    // 封装一个方法，负责把 state 中所有的数据，持久化存储到本地
    saveToStorage(state) {
      window.localStorage.setItem('state', window.JSON.stringify(state))
    },
    // 更新用户的基本信息
    updateUserInfo(state, payload) {
      state.user = payload
      // 在 Mutation 方法中，this 代表当前 store 的实例对象
      this.commit('saveToStorage')
    },
    // 清空 State 中的数据
    cleanState(state) {
      // 清空 Vuex 中的数据
      state.tokenInfo = {}
      state.user = {}
      state.profile = {}
      // 清空本地的存储中的所有数据
      window.localStorage.clear()
    },
    // 更新用户的简介信息
    updateProfile(state, payload) {
      state.profile = payload
      this.commit('saveToStorage')
    }
  },
  // 计算属性
  getters: {
    // 动态计算用户的头像
    avatar(state) {
      if (state.profile.photo) {
        // 如果用户的简介信息中包含了头像的地址，则返回真实的头像
        return state.profile.photo
      } else {
        // 否则，就返回默认的头像地址
        return 'https://img.yzcdn.cn/vant/cat.jpeg'
      }
    }
  },
  actions: {},
  modules: {}
})

// 测试数据是否取出来了
// console.log(store.state)

export default store
